<template>
  <div>
    <div class="video_title">
      <i class="el-icon-menu"></i>
      <div>视频列表</div>
    </div>
    <el-table :data="videoList"
              border
              stripe>
      <el-table-column label="视频名称"
                       prop="Vname">
      </el-table-column>
      <el-table-column label="绑定课程"
                       prop="Vstate">

      </el-table-column>
      <el-table-column label="视频时长"
                       prop="Vtime">

      </el-table-column>
      <el-table-column label="编辑日期">
        <template slot-scope="scope">
          <div>
            {{new Date(scope.row.createAt).toLocaleString()}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <div v-if="!myflag">
              <el-link type="success"
                       @click="eidt(scope.row)">编辑</el-link>
              &nbsp;&nbsp;
              <el-link type="danger"
                       @click="del(scope.row.ID)">删除</el-link>
            </div>
            <el-button v-if="myflag"
                       type="success"
                       @click="saveDirVideo(scope.row._id)">添加</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :total="count"
                   :page-size="pageSize"
                   layout="prev,pager,next"
                   background
                   @current-change="pageChange"></el-pagination>
  </div>
</template>

<script>
import { delVideo } from '../../api/video'
import { addDirVideo } from '../../api/course'
export default {
  name: 'Ljfvue2011Videotabel',
  inject: ["myflag"],
  props: {
    mydid: { //目录_id
    },
    myCDid: { //课程_id
    },
    count: {
      type: Number
    },
    videoList: {
      type: Array,
      require: true
    },
    pageSize: {
      type: Number
    },
    pageStart: {
      type: Number
    }
  },
  beforeMount () {

  },
  data () {
    return {
    };
  },
  mounted () {
  },
  watch: {

  },
  methods: {
    async saveDirVideo (_id) { //给对应的目录下 添加视频
      var res = await addDirVideo({
        cid: this.myCDid, //课程_id
        _id: this.mydid, //目录_id
        Vid: _id //视频_id
      })
      console.log(res)
      if (res.data.success) {
        this.$message({
          message: "添加成功",
          type: "success"
        })
      }
      // 传送视频列表
      this.$bus.$emit("sendvideodata", res.data.data.list);
      // 触发vuex的方法 关闭视频选择
      this.$store.commit("VideoStore/closeVideo", false)
    },
    del (ID) {
      delVideo(ID).then(res => {
        console.log(res);
        this.$message({
          message: "删除成功",
          type: "success"
        })
        this.$parent.getVideo(this.pageStart);
      })
    },
    eidt (row) { //点击编辑 当前行数据传送给兄弟组件
      this.$bus.$emit("sendvideo", row)
      console.log(1123)
    },
    pageChange (val) { //分页改变事件
      // val 最新的页码
      this.$parent.getVideo(val)
    }
  },
};
</script>
<style lang="less" scoped>
.video_title {
  width: 100%;
  display: flex;
  height: 40px;
  margin: 20px 0;
  line-height: 40px;
  i {
    height: 40px;
    font-size: 40px;
    width: 40px;
    border: 2px solid red;
  }
  div {
    padding-left: 40px;
    height: 44px;
    flex: 1;
    box-sizing: border-box;
    border-top: 2px solid red;
    border-right: 2px solid red;
    border-bottom: 2px solid red;
  }
}
</style>